<template>
	<view>
		<view style="background-color: #fff;">
			<up-tabs :list="list1" @click="clickTab" style="width: 100vw;padding-bottom: 10rpx;"
			 :activeStyle="activeStyle"
			 :current="current"
			 :itemStyle="itemStyle"></up-tabs>
		</view>
		<view class="">
			<view class="flex justify-start align-center bookBox" v-if="current == 0 || current == 1">
				<image src="/static/img/shijianjianshi.jpg" mode="aspectFill" class="bookImg u-m-l-32 u-m-r-32"></image>
				<view style="height: 240rpx;">
					<view class="bookName">时间简史 <text class="author">尤瓦尔·赫拉利</text> </view>
					<view class="bookNum u-m-t-16">
						借阅日期: 2024-03-25
					</view>
					<view class="bookNum u-m-t-16">
						应还日期：2024-04-25
					</view>
					<!-- btn -->
					<view class="">
						<view class="btning u-m-t-24">借阅中</view>
					</view>
				</view>
			</view>
			<view class="flex justify-start align-center bookBox" :key="index" v-if="current == 0 || current == 2">
				<image src="/static/img/rengongzhineng.jpg" mode="aspectFill" class="bookImg u-m-l-32 u-m-r-32"></image>
				<view style="height: 240rpx;">
					<view class="bookName">人工智能简史 <text class="author">尼克·波斯特罗姆</text> </view>
					<view class="bookNum u-m-t-16">
						借阅日期: 2024-03-25
					</view>
					<view class="bookNum u-m-t-16">
						应还日期：2024-04-25
					</view>
					<!-- btn -->
					<view class="">
						<view class="btning u-m-t-24" style="background-color: #E8F5E9;color: #4CAF50;">已归还</view>
					</view>
				</view>
			</view>
			<view class="flex justify-start align-center bookBox" :key="index" v-if="current == 0 || current == 3">
				<image src="/static/img/xinlixueyushenghuo.jpg" mode="aspectFill" class="bookImg u-m-l-32 u-m-r-32"></image>
				<view style="height: 240rpx;">
					<view class="bookName">心理学与生活 <text class="author">理查德·格里格</text> </view>
					<view class="bookNum u-m-t-16">
						借阅日期: 2024-03-25
					</view>
					<view class="bookNum u-m-t-16">
						应还日期：2024-04-25
					</view>
					<!-- btn -->
					<view class="">
						<view class="btning u-m-t-24" style="background-color: #FFEBEE;color: #FF5252;">已超期</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {reactive, ref} from 'vue'
	const list1 = reactive([
		{
			name: '全部'
		},
		{
			name: '借阅中'
		},
		{
			name: '已归还'
		},
		{
			name: '已超期'
		}
	])
	const itemStyle = ref({
		'width': '25vw',
		'paddingBottom': '10rpx'
	})
	const activeStyle = ref({
		'color': '#3498DB'
	})
	
	const current = ref(0)
	
	const clickTab = (e) => {
		console.log(e)
		current.value = e.index
	}
</script>

<style lang="scss">
	.bookBox{
		width: 686rpx;
		margin-left: calc(50vw - 343rpx);
		background-color: #fff;
		height: 314rpx;
		border-radius: 24rpx;
		margin-top: 32rpx;
		.bookImg{
			width: 160rpx;
			height: 240rpx;
			border-radius: 8rpx;
		}
		.bookName{
			color: #000000;
			font-size: 28rpx;
			font-weight: bold;
		}
		.author{
			color: #6B7280;
			font-size: 28rpx;
		}
		.bookNum{
			color: #9CA3AF;
			font-size: 28rpx;
		}
		.btn{
			width: 120rpx;
			height: 72rpx;
			background: #4A90E2;
			border-radius: 8rpx;
			color: #FFFFFF;
			font-size: 28rpx;
			text-align: center;
			line-height: 72rpx;
		}
		.btning{
			width: 120rpx;
			height: 50rpx;
			background: #E3F2FD;
			color: #3498DB;
			font-size: 24rpx;
			text-align: center;
			line-height: 50rpx;
			border-radius: 24rpx;
		}
	}
	
</style>